<template>
  <div class="real_time">
    <h2>今日实时客流</h2>
    <div class="traffic">
      <span class="people">人次</span>
      <span class="time">时间</span>
      <div class="all_data">
          <i>今日客流总数：{{allPeople}}</i>
          <i>平均停留时间：{{avgTime}}分钟</i>
      </div>
      <chart
        class="chart"
        :options="linedata"
        :auto-resize="true"
      ></chart>

    </div>
  </div>
</template>

<script>
import echarts from "vue-echarts/components/ECharts.vue";
import "echarts/lib/chart/line";
import "echarts/lib/component/tooltip";
import "echarts/lib/component/title";
import "echarts/lib/component/legend";
import moment from "moment";

export default {
  name: "realTime",
  components: {
    chart: echarts
  },

  data() {
    return {
      stay_data: ["10", "20"],
      uv_data: ["4210", "1254"],
      time_axis: ["09:00", "10:00"],
      allPeople:0,
      avgTime:0,
      linedata: {
        title: {
          // show: false,
          // left: '2%',
          text: "",
          textStyle: {
            fontSize: 14,
            color: "#353C68"
          }
        },
        tooltip: {
          //hover弹窗
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: "#ddd"
            }
          },
          backgroundColor: "rgba(255,255,255,1)",
          padding: [5, 10],
          textStyle: {
            color: "#7588E4"
          },
          extraCssText: "box-shadow: 0 0 5px rgba(0,0,0,0.3)"
        },
        legend: {
          // 图例
          show: false,
          right: "1%",
          top: "1%",
          // orient: 'vertical',
          data: ["停留时间", "客流人数"],
          // icon: 'roundRect',
          icon: "line"
        },
        xAxis: {
          type: "category",
          data: this.time_axis,
          boundaryGap: false,
          splitLine: {
            // 坐标分割线样式
            show: false,
            interval: "auto",
            lineStyle: {
              color: ["#acb2c0"]
            }
          },
          axisTick: {
            // 刻度线相关
            show: true
          },
          axisLine: {
            // 坐标轴样式
            show: true,
            lineStyle: {
              color: "#9e80c0"
            }
          },
          axisLabel: {
            margin: 10,
            //interval:0,
            rotate: 40,
            textStyle: {
              fontSize: 10
            }
          }
        },
        yAxis: [
          {
            name: "", //停留时间---
            type: "value",
            position: "left",
            splitLine: {
              show: false, // 时间y轴分割线
              lineStyle: {
                type: "dotted",
                color: ["#acb2c0"]
              }
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#FFA329"
              }
            },
            axisLabel: {
              // formatter: '{value} %',
              margin: 5,
              textStyle: {
                fontSize: 14
              }
            }
          },
          {
            name: "",
            type: "value",
            position: "left",
            splitLine: {
              lineStyle: {
                type: "dotted",
                color: ["#2c303c"]
              }
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#73cfd1"
              }
            },
            axisLabel: {
              formatter: function(value, index) {
                return value / 1000 + "k";
              },
              margin: 3,
              rotate: 40,
              textStyle: {
                fontSize: 10
              }
            }
          }
        ],
        series: [
          {
            name: "停留时间",
            type: "line",
            smooth: true,
            showSymbol: false,
            symbol: "circle",
            symbolSize: 6,
            data: [],
            // areaStyle: {
            //   normal: {
            //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            //       offset: 0,
            //       color: 'rgba(199, 237, 250,0.5)'
            //     }, {
            //       offset: 1,
            //       color: 'rgba(199, 237, 250,0.2)'
            //     }], false)
            //   }
            // },
            itemStyle: {
              normal: {
                color: "#ffad8e"
              }
            },
            lineStyle: {
              normal: {
                width: 1.5
              }
            }
          },
          {
            name: "客流人数",
            type: "line",
            yAxisIndex: 1, // 配置显示的坐标轴
            smooth: true,
            showSymbol: false,
            symbol: "circle",
            symbolSize: 6,
            data: [],
            itemStyle: {
              normal: {
                // color: "#8f74b1"
                color: {
                  colorStops: [
                    {
                      offset: 0,
                      color: "#3d3160"
                    },
                    {
                      offset: 0.5,
                      color: "#a181c2"
                    },
                    {
                      offset: 1,
                      color: "#3d3160"
                    }
                  ]
                }
              }
            },
            lineStyle: {
              normal: {
                width: 1.5
              }
            }
          }
        ]
      }
    };
  },
  mounted() {
    let cc = this;
    cc.getTodayFlow();
    let num = 1000 * 60;
    // setInterval(function() {
    //   cc.getTodayFlow();
    // }, 60000);
  },

  methods: {
    getTodayFlow() {
      // console.log("today_flow   today_total");
      let andatongURL = this.$config.andatongurl + "/andatong";
      // 获取今日实时客流
      // console.log('获取今日客流', andatongURL);
      let nowstr = moment().format("YYYYMMDD");
      this.$http
        .post(andatongURL, {
          date: nowstr,
          mall_id: "sh001",
          bi_name: "today_flow"
        })
        .then(res => {
          let data = res.data.data;

          this.linedata.xAxis.data = [];
          this.linedata.series[1].data = [];
          this.linedata.series[0].data = [];
          data.forEach(element => {
            let dtime = element["dt_hour"] + ":" + element["dt_min"];
            this.linedata.xAxis.data.push(dtime);
            this.linedata.series[1].data.push(element["bi_value"]["count"]);
            // this.linedata.series[0].data.push(
            //   Number(element["bi_value"]["staty"]).toFixed(1)
            // );
          });
          let count = data.length;
          let rtFlow = this.linedata.series[1].data[count - 1];
          // this.$bus.emit("rtFlow", rtFlow);
        });
     // 获取全场今日总数
        this.$http
          .post(andatongURL, {
            date: nowstr,
            mall_id: "sh001",
            bi_name: "today_total",
            venue: this.venues
          })
          .then(res => {
            let data = res.data.data;
            data.forEach(element => {
              let todayFlow = element["bi_value"]["all_customer"];
              let avg = parseInt(element["bi_value"]["all_stay"]);
              //this.$bus.emit("todayFlow", todayFlow);

              avg = avg.toFixed(2);
              let avgStay = Number(avg);

              this.avgTime=avgStay;
              this.allPeople=todayFlow;
             // console.log(todayFlow,avgStay);
              // this.$bus.emit("avgStay", avgStay);
            });
          });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.real_time {
  width: 400px;
  height: 280px;
  margin-top: 20px;
    float: left;
  margin-right: 40px;
  .traffic {
    width: 400px;
    height: 220px;
    background: #151a27;
    position: relative;
    .all_data{
        position: absolute;
        right:20px;
        top: 10px;
        i{
            font-style: inherit;
            font-size: 12px;
            color: #fff;
            display: block;
            text-align: left
        }
    }
    span {
      position: absolute;
      font-size: 12px;
      &.people {
        top: 40px;
        left: 20px;
        width: 20px;
        color: #73cfd1;
        &::before {
          content: "";
          width: 1px;
          height: 114px;
          background: #92949a;
          left: 20px;
          top: 6px;
          position: absolute;
          z-index: 9;
        }
      }
      &.time {
        bottom: 50px;
        right: 10px;
        color: #9e80c0;
        &::before {
          content: "";
          width: 320px;
          height: 1px;
          background: #92949a;
          right: 30px;
          top: 6px;
          position: absolute;
          z-index: 9;
        }
      }
    }
    .chart {
      width: 400px;
      height: 220px;
    }
  }
}
</style>
